<template>
  <Form class="form" ref="userinfoForm" :rules="userinfoRules" :model="userinfo" :label-width="100">
    <FormItem prop="userName" label="姓名：">
      <Input type="text" v-model="userinfo.userName" placeholder="请输入姓名"></Input>
    </FormItem>
    <FormItem prop="address" label="地址：">
      <Input type="text" v-model="userinfo.address" placeholder="请输入地址"></Input>
    </FormItem>
    <FormItem prop="relations" label="联系方式：">
      <Input type="text" v-model="userinfo.relations" placeholder="请输入联系方式"></Input>
    </FormItem>
    <FormItem prop="level" label="信用等级：">
      <Select v-model="userinfo.level" placeholder="请选择信用等级">
        <Option :value="1">1级</Option>
        <Option :value="2">2级</Option>
        <Option :value="3">3级</Option>
      </Select>
    </FormItem>
    <FormItem prop="email" label="邮箱地址：">
      <Input type="text" v-model="userinfo.email" placeholder="请输入邮箱地址"></Input>
    </FormItem>
    <FormItem prop="number" label="手机号码：">
      <Input type="text" v-model="userinfo.number" placeholder="请输入手机号码"></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" :loading="saveLoading" :disabled="disabled" @click="save">保存</Button>
    </FormItem>
  </Form>
</template>

<script>
  export default {
    name: "Userinfo",
    data() {
      // 验证手机号格式
      const validatePhone = (rule, value, callback) => {
        var regExp = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (value) {
          if (!regExp.test(value)) {
            callback(new Error("手机号码格式错误"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入手机号"));
        }
      };
      // 验证邮箱格式
      const validateEmail = (rule, value, callback) => {
        var regExp = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (value) {
          if (!regExp.test(value)) {
            callback(new Error("邮箱格式错误"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入邮箱地址"));
        }
      };
      return {
        userinfo: {
          id: 0,
          userId: 0,
          userName: "",
          address: "",
          relations: "",
          level: 0,
          email: "",
          number: "",
          zoneId: 0,
        },
        // 表单验证规则
        userinfoRules: {
          userName: [
            {required: true, message: "请输入姓名", trigger: 'blur'}
          ],
          address: [
            {required: true, message: "请输入地址", trigger: 'blur'}
          ],
          relations: [
            {required: true, message: "请输入联系方式", trigger: 'blur'}
          ],
          level: [
            {required: true, message: "请选择信用等级", trigger: 'blur', type: 'number'}
          ],
          email: [
            {validator: validateEmail, trigger: 'blur'}
          ],
          number: [
            {validator: validatePhone, trigger: 'blur'}
          ]
        },
        // 按钮加载状态
        saveLoading: false,
        // 按钮禁用状态
        disabled: true
      }
    },
    watch: {
      userinfo: {
        handler(newValue, oldValue) {
          if (oldValue.userId) {
            this.disabled = false;
          }
        },
        deep: true
      }
    },
    methods: {
      getUserinfo() {
        this.$requests.get("/userinfo/get", null).then(res => {
          if (res.data.code === 0) {
            this.userinfo = res.data.data;
            setTimeout(() => {
              this.disabled = true;
            }, 100)
          }
        })
      },
      save() {
        this.$refs["userinfoForm"].validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.$requests.post("/userinfo/update", this.userinfo).then(res => {
              if (res.data.code === 0) {
                this.$Message.success("保存成功");
                this.getUserinfo();
              } else {
                this.$Message.error(res.data.msg);
              }
              setTimeout(() => {
                this.saveLoading = false;
              }, 500)
            })
          }
        })
      }
    },
    created() {
      this.getUserinfo();
    }
  }
</script>

<style lang="less" scoped>
  .ivu-form-item {
    margin-top: 40px;
  }
</style>
